<template>
  <div class="my-order">
    <div class="order-cart">
      <div class="tabs">
        <el-tabs v-model="statusName" @tab-click="handleClick">
          <div class="search">
            <el-form :inline="true" size="small" label-width="140px">
              <el-form-item>
                <el-input class="input-search" v-model="keyword" placeholder="输入商品标题关键字或者订单号进行搜索"></el-input>
              </el-form-item>
            </el-form>
            <el-button
                class="btn-search"
                @click="searchList"
                type="primary"
                size="small">
              订单搜索
            </el-button>
          </div>
          <div class="table-header">
            <el-table
                empty-text=" "
                style="width: 100%;">
              <el-table-column
                  label="商品"
                  width="498"
              >
              </el-table-column>
              <el-table-column
                  label="单价"
                  width="90">
              </el-table-column>
              <el-table-column
                  label="数量"
                  width="100">
              </el-table-column>
              <el-table-column
                  label="付款金额"
                  width="160">
              </el-table-column>
              <el-table-column
                  label="交易状态"
                  width="160">
              </el-table-column>
              <el-table-column
                  label="交易操作"
                  width="160">
              </el-table-column>
            </el-table>
          </div>
          <el-tab-pane label="所有订单" name="all">
            <order-list :orderList="orderList"></order-list>
          </el-tab-pane>
          <el-tab-pane label="待付款" name="first">
            <order-list :orderList="orderList"></order-list>
          </el-tab-pane>
          <el-tab-pane label="待发货" name="second">
            <order-list :orderList="orderList"></order-list>
          </el-tab-pane>
          <el-tab-pane label="待收货" name="third">
            <order-list :orderList="orderList"></order-list>
          </el-tab-pane>
          <el-tab-pane label="待评论" name="fourth">
            <order-list :orderList="orderList" name="fourth"></order-list>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="page" v-if="total>10">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          @prev-click="prevClick"
          @next-click="nextClick"
          @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import OrderList from "@/views/pay/order/OrderList.vue";

export default {
  name: "MyOrder.vue",
  components: {OrderList},
  data() {
    return {
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      keyword: '',
      status: '',
      statusName: 'all',
    }
  },
  methods: {
    getList(status) {
      this.pageSize *= 1
      this.pageNum *= 1
      this.getRequest('/oms/bookOrder/user/list', {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: status,
        keyword: this.keyword
      }).then((resp) => {
        // console.log(resp)
        this.orderList = resp.data.list
        this.pageSize = resp.data.pageSize
        this.pageNum = resp.data.pageNum
        this.total = resp.data.total
      })
    },
    prevClick() {
      this.pageNum -= 1
      this.getList(this.status)
    },
    nextClick() {
      this.pageNum += 1
      this.getList(this.status)
    },
    pageChange(val) {
      this.pageNum = val
      this.getList(this.status)
    },
    searchList() {
      this.pageNum = 1
      if(this.keyword!=""){
        this.$message.success('搜索成功')
        this.getList(this.status)
      }else{
        return
      }
    },
    handleClick(tab) {
      if (tab.name == "all") {
        this.status = ''
        this.getList()
      } else if (tab.name == "first") {
        this.status = 1
        this.getList(1)
      } else if (tab.name == "second") {
        this.status = 2
        this.getList(2)
      } else if (tab.name == "third") {
        this.status = 3
        this.getList(3)
      } else if (tab.name == "fourth") {
        this.status = 4
        this.getList(4)
      }
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.my-order {
  padding-bottom: 100px;
}

.order-cart {
  margin-top: 100px;
}

::v-deep .el-tabs__item.is-active, ::v-deep .el-tabs__item:hover {
  color: #c61d07;
  font-weight: 600;
}

::v-deep .el-tabs__item {
  font-size: 24px;
}

::v-deep [data-v-38603e50] [data-v-38603e50] .el-tabs__item {
  padding-left: 40px;
  padding-right: 40px;
}

::v-deep .el-tabs__active-bar {
  background: #d5260f;
}

.search {
  margin-top: 20px;
  padding-bottom: 50px;
}

.input-search {
  font-size: 17px;
  width: 380px;
}

.btn-search {
  position: relative;
  top: -53px;
  right: -410px;
  font-size: 17px;
}

.table-header {
  position: absolute;
  top: 80px;
}

.table-header .el-table {
  background: #f7f7f7;
  font: 100 20px 华文黑体;
}

::v-deep .el-table th.el-table__cell > .cell {
  padding-left: 35px;
}

.page {
  margin-top: 20px;
  text-align: center;
}

::v-deep .el-pagination.is-background .el-pager li {
  min-width: 50px;
  font: 400 20px 华文宋体;
  height: 50px;
  line-height: 50px;
  border: 1px solid #e8e8e8;
  margin-left: 10px;
  margin-right: 10px;
}

::v-deep .el-pagination .btn-next, ::v-deep .el-pagination .btn-prev {
  height: 50px;
  line-height: 50px;
}

::v-deep .el-pagination .btn-next:hover, ::v-deep .el-pagination .btn-prev:hover {
  color: #ee5b5b;
}

::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active, ::v-deep [data-v-38603e50] .el-pagination.is-background .el-pager li:hover {
  color: #f58181;
  text-decoration: none;
  background: #f8dede;
  border: 1px solid #f8c6c6;
}
</style>